<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        input {
            border: 1px solid #000;
            outline: none;
            width: 400px;
            height: 40px;
            padding-left: 20px;
            font-size: 20px;
        }
        .box {
            width: 420px;
            height: 80px;
            background-color: #f0f0f0;
            line-height: 80px;
            font-size: 20px;
        }
    </style>
</head>
<body>

    <input type="text" placeholder="搜索">
    <div class="box">
        调用ajax函数的次数: <span>0</span> 
    </div>


    <script src="./js/debounce.js"></script>
    <script>
        // 作用： 减少函数被频繁的调用

        // 要求：   
            // 模拟请求数据 调用请求数据的函数

        // 编码：
            // 1.获取页面相关的元素
            var inp = document.querySelector("input[type='text']");
            var txt = document.querySelector(".box span");

            // 2. 计数器变量
            var count = 0;

            // 3. 定义请求数据的函数
            var ajax = function(){ 
                // 记录请求的次数
                count ++;
                txt.innerText = count;
            }

            // 4. 监听输入框输入的值的变化
            // inp.oninput = function() {
            //     console.log(this.value);
            //     // 模拟ajax
            //     ajax();
            // }

            // 5. 监听输入框输入的值的变化(防抖)
            inp.oninput = debounce(function(){
                // console.log(this);// inp 事件的调用者
                console.log(this.value);
                // 模拟ajax
                ajax();
            },500)


            // 应用场景：
                // 比如： 点击发送手机验证码




    </script>
</body>
</html>